<template>
    <div>
        <div v-for="(val,index) in values" style="width: 100%;float: left;margin-bottom: 15px">
            <span style="float:left;width: 15%">{{titles[index]}}</span>
            <el-progress style="float: left;width: 84%" :text-inside="textShow" :stroke-width="size" :percentage="val" :color="color[index]"/>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        size:{
            type: Number,
            default: 26
        },
        textShow:{
            type: Boolean,
            default: true,
        },
        values:{
            type: Array,
            default: () => [],
        },
        titles:{
            type: Array,
            default: () => [],
        },
        color:{
            type: Array,
            default: () => {
                const arr = [];
                for (let i = 0; i < 4; i++) {
                    arr.push([
                        {color: '#f56c6c', percentage: 24},
                        {color: '#e6a23c', percentage: 50},
                        {color: '#409EFF', percentage: 75},
                        {color: '#5cb87a', percentage: 100},
                    ])
                }
                return arr;
            }
        }
    },
    data() {
        return {
        };
    },
    created() {

    },
    methods: {},
    watch: {}
};
</script>
<style>

</style>
